<template>
	<z-paging ref="paging" v-model="list" @query="getData" :loading-more-enabled="false">
		<view class="d-p-l-30 d-p-r-30" v-if="list.length">
			<view class="d-m-t-20 d-flex d-col-top">
				<u-image :src="info.picture" width="290rpx" height="184rpx" radius="10rpx"></u-image>
				<view class="d-m-l-20 d-flex-1">
					<view class="d-font-30">{{ info.name }}</view>
					<view class="d-font-24 d-be d-m-t-10">有效期：{{ info.end_date }}</view>
					<view class="d-m-t-20 d-font-30 d-red">
						<text class="d-font-24">￥</text>
						<text class="d-bold">{{ info.selling_price }}</text>
					</view>
				</view>
			</view>
			<view class="d-flex d-m-t-30 d-p-b-30 u-border-bottom">
				<view class="d-flex-1 d-font-28">购买数量</view>
				<view>
					<view class="d-font-28 d-flex d-row-center">x{{ number }}</view>
				</view>
			</view>
			<view class="d-font-28 d-p-t-30">
				<view>支付方式</view>
				<view>
					<u-radio-group v-model="paytype" active-color="#59A0FF" size="40rpx" placement="column">
						<view class="d-flex d-p-t-30 d-p-b-30 u-border-bottom" v-if="hasPay(1)">
							<u-image src="/static/card.png" width="40rpx" height="40rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28" @click="paytype = '1'">{{ payList[1] }}</view>
							<u-radio name="1"></u-radio>
						</view>
						<view class="d-flex d-p-t-30 d-p-b-30 u-border-bottom" v-if="hasPay(2)">
							<u-image src="/static/count.png" width="40rpx" height="40rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28" @click="paytype = '2'">
								<text>{{ payList[2] }}</text>
								<text class="d-red">{{ count }}</text>
							</view>
							<u-radio name="2"></u-radio>
						</view>
						<view class="d-flex d-p-t-30 d-p-b-30 u-border-bottom" v-if="hasPay(5) && multifunctional_card_count > 0">
							<u-image src="/static/count.png" width="40rpx" height="40rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28" @click="paytype = '5'">{{ payList[5] }}</view>
							<u-radio name="5"></u-radio>
						</view>
						<view class="d-flex d-p-t-30 d-p-b-30" v-if="hasPay(3)">
							<u-image src="/static/wx.png" width="40rpx" height="35rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28" @click="paytype = '3'">{{ payList[3] }}</view>
							<u-radio name="3"></u-radio>
						</view>
					</u-radio-group>
				</view>
			</view>
		</view>

		<d-agent :show="show.agent" title="用户须知" :content="info.user_content" @confirm="show.agent = false"></d-agent>
		<d-mode :show="show.confirm" :content="'确定使用' + getPayName(payList[paytype]) + '支付？'" @cancel="show.confirm = false" @confirm="confirm"></d-mode>
		<d-mode-cancel :show="show.cancel" content="是否放弃本次付款？" @cancel="cancelPay" @confirm="confirm"></d-mode-cancel>

		<template slot="bottom">
			<view class="d-p-l-30 d-p-r-30 d-p-b-20 d-p-t-20">
				<view class="d-flex">
					<u-checkbox-group size="24rpx" v-model="agent" shape="circle" active-color="#59A0FF">
						<u-checkbox label="我已同意和接受" name="ok" label-size="25rpx" label-color="#999999"></u-checkbox>
					</u-checkbox-group>
					<text class="d-font-24" @click="show.agent = true">《用户须知》</text>
					<text class="d-font-24">的全部内容</text>
				</view>
				<view class="d-m-t-30 d-flex">
					<view class="d-flex-1 d-font-30">
						<text>总额：</text>
						<text class="d-font-24 d-red">￥</text>
						<text class="d-red" v-if="info.selling_price">{{ (info.selling_price * number).toFixed(2) }}</text>
					</view>
					<view>
						<u-button
							type="primary"
							shape="circle"
							:custom-style="{
								height: '80rpx',
								width: '240rpx',
								fontSize: '30rpx',
								background: '#59A0FF'
							}"
							@click="afterSubmit"
						>
							提交订单
						</u-button>
					</view>
				</view>
			</view>
		</template>
	</z-paging>
</template>

<script>
import { cardDetail, payList2, createOrder } from '@/common/api';
export default {
	data() {
		return {
			list: [],
			info: {},
			number: 1,
			show: {
				agent: false,
				confirm: false,
				cancel: false
			},
			payList: {},
			count: 0,
			multifunctional_card_count: 0,
			paytype: '1',
			agent: ['ok']
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.number = e.number;
		this.show.agent = true
	},
	onBackPress(e) {
		if (e.from === 'backbutton') {
			this.show.cancel = true;
			return true;
		}
	},
	methods: {
		getData() {
			payList2().then(res => {
				this.payList = res.list;
				this.count = res.free_count;
				this.multifunctional_card_count = res.multifunctional_card_count;
			});
			cardDetail({
				id: this.id
			})
				.then(res => {
					this.$refs.paging.complete([res]);
					this.info = res;
				})
				.catch(err => {
					this.$ref.paging.complete(false);
				});
		},
		// 是否含有支付方式
		hasPay(pay_type) {
			return this.payList[pay_type] ? true : false;
		},
		afterSubmit() {
			if (!this.agent.length) {
				return uni.$u.toast('请阅读并同意《用户须知》');
			}
			this.show.confirm = true;
		},
		confirm() {
			this.show.confirm = false;
			this.show.cancel = false;
			uni.showLoading({
				title: '订单提交中...',
				mask: true
			});
			createOrder({
				goods_id: this.id,
				goods_number: this.number,
				order_type: 2,
				has_child: 0,
				pay_way: this.paytype
			}).then(res => {
				if (this.paytype != 3) {
					uni.$u.toast('支付成功');
				}
				setTimeout(() => {
					if (this.paytype != 3) {
						uni.$u.route({
							url: '/pages/mine/card',
							type: 'redirectTo'
						});
					} else {
						// 支付宝、微信
						// 说的跳转url
						window.location.href = res.pay_url;
					}
				}, 2000);
			});
		},
		getPayName(name) {
			if (name) {
				return name.replace(/[:\s]/g, '');
			}
			return name;
		},
		cancelPay() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.d-tag {
	background: #f3f3f3;
	border-radius: 4rpx;
	height: 36rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #333333;
	padding: 0 18rpx;
}
.d-be {
	color: #bebebe;
}
.d-red {
	color: #ff4105;
}
.d-bold {
	font-weight: bold;
}

.minus,
.plus {
	width: 38rpx;
	height: 38rpx;
	background: #f3f3f3;
}
.input {
	width: 64rpx;
	font-size: 28rpx;
}

.d-notice {
	background-color: #f6f6f6;
	margin: 0 -30rpx;
}

.d-main {
	color: #59a0ff;
}
.d-66 {
	color: #666;
}
</style>
